import React, { memo } from 'react'
import Split from 'react-split'
import { SplitPageWrap } from './style'
import { Aside, Content } from './components'
import { ConfigProvider, theme } from 'antd'
import { SplitContextProvider } from './components/SplitContextProvider'

const SplitPage = memo(() => {
    return (
        <ConfigProvider theme={{
            algorithm: theme.darkAlgorithm,
        }}>
            <SplitContextProvider>
                <SplitPageWrap>
                    <Split
                        className="split"
                        gutterSize={4}
                        sizes={[20, 80]}
                        minSize={200}
                    >
                        <Aside />
                        <Content />
                    </Split>
                </SplitPageWrap>
            </SplitContextProvider>

        </ConfigProvider>
    )
})

export default SplitPage